<template>
    <div class="m_content">
        <div class="m_header">
            <label  style="color: white;float: right;font-size: xx-large"><p>{{value}}</p></label>
            <label  style="color: white;float: left;font-size: xx-large"><p>liuyu的博客</p></label>

        </div>

        <div class="maction">
            <div style="float: right">
                <span><el-link type="primary" href="/">主页</el-link></span>

                <span v-show="haslogin">
                <el-divider v-show="haslogin"  direction="vertical"></el-divider>
                <span ><el-link type="danger" @click="logout">退出</el-link></span>
            </span>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Header",
        data() {
            return {
                user: {
                    username: "请先登录",
                    id: "",
                },
                haslogin: false,
                value: "",
                enter: "" +
                "",
            }
        },
        mounted() {
            // 页面加载完后显示当前时间
            this.value = this.dealWithTime(new Date())
            // 定时刷新时间
            let _this = this
            // 定时器
            this.timer = setInterval(function () {
                _this.value = _this.dealWithTime(new Date()) // 修改数据date
            }, 1000)
        },
        //写入方法
        methods: {
            dealWithTime(data) {
                let formatDateTime
                let Y = data.getFullYear()
                let M = data.getMonth() + 1
                let D = data.getDate()
                let H = data.getHours()
                let Min = data.getMinutes()
                let S = data.getSeconds()
                let W = data.getDay()
                H = H < 10 ? ('0' + H) : H
                Min = Min < 10 ? ('0' + Min) : Min
                S = S < 10 ? ('0' + S) : S
                switch (W) {
                    case 0:
                        W = '天'
                        break
                    case 1:
                        W = '一'
                        break
                    case 2:
                        W = '二'
                        break
                    case 3:
                        W = '三'
                        break
                    case 4:
                        W = '四'
                        break
                    case 5:
                        W = '五'
                        break
                    case 6:
                        W = '六'
                        break
                    default:
                        break
                }
                formatDateTime = Y + '年' + M + '月' + D + '日 ' + H + ':' + Min + ':' + S + ' 星期' + W
                return formatDateTime
            },
            //退出登录
            logout() {
                const _this = this;
                //发送退出登录请求
                _this.$axios.get("/logout", {
                    //由于只有在登录的时候才能进行退出，所以将token信息携带回去
                    headers: {
                        "authorization": localStorage.getItem("token")
                    }
                }).then(res => {
                    //清空数据信息
                    _this.$store.commit("REMOVE_INFO")
                    //返回到登录界面
                    _this.$router.push("/login")
                })
            },
        },
        //执行一个初始化操作
        created() {
            //如果用户名存在，就回显出来
            if (this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.user.id = this.$store.getters.getUser.id
                this.haslogin = true
            }
        },
// 注意在vue实例销毁前，清除我们的定时器。
        destroyed() {
            if (this.timer) {
                clearInterval(this.timer)
            }

        }
    }
</script>

<style scoped>
    .m_content {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .maction {
        height: 10px;
        margin: 10px 0px;
    }

    .m_header {
        height: 100px;
        background-color: darkgrey;
    }

    .background {
        width:100%;
        height:100%;  /**宽高100%是为了图片铺满屏幕 */
        z-index:-1;
        position: absolute;
    }
</style>